<template>
  <div class="_wz_cent_main _wz_imgListUpload">
    <FormItem label="图片上传">
      <Upload action="*" :show-upload-list="false" :format="['jpg','jpeg','png']" :before-upload="handleBeforeUpload" multiple>
        <Button icon="ios-cloud-upload-outline">选择要上传的图片</Button>
      </Upload>
      <div style="margin:10px 0 0 0;padding: 10px;min-height: 220px;border: 1px solid #e1e1e1;">
        <!--回显-->
        <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in imgEntityList"  v-if="!item.type">
          <div class="_wz_insertimage">
            <img :src="item.url" @error="public.imgDispose">
            <div class="_wz_insertimage-cover">
              <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
              <Icon type="ios-trash-outline" @click.native="item.type = true"></Icon>
            </div>
          </div>
          <i-input v-model="item.name" placeholder="填写图片名称" @on-change="item.name = item.name.length > 0 ? item.name : '图片描述'" clearable />
        </div>

        <!--新增-->
        <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in defaultList">
          <div class="_wz_insertimage">
            <img :src="item" @error="public.imgDispose">
            <div class="_wz_insertimage-cover">
              <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
              <Icon type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
            </div>
          </div>
          <i-input v-model="nameList[index]" placeholder="填写图片名称" clearable />
        </div>
      </div>
    </FormItem>


    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>
  </div>
</template>
<script>



/*
*
*
*
<imgListUpload :imgList="imgList" ref="wzImgListUpload"></imgListUpload>
import imgListUpload from "../../../components/table/imgListUpload";
imgListUpload,
imgList:[],//多图回显
* 1.引用
	<imgListUpload :imgList="imgList" ref="wzImgListUpload"></imgListUpload>
	import imgListUpload from "../../../components/table/imgListUpload";
	imgListUpload,
	2.字段
	 imgList:[],//多图回显
	3.修改时数据处理
	* let imgList = [];
	res.data.data.imgEntityList.forEach((k, i) => {
		k.url = that.apiUrl.imgUrl + k.annualInspectImgUrl
		k.name = k.name
		imgList.push(k);
	})
	that.imgList = imgList;//res.data.data.imgEntityList;//多图回显
	*
	* 4.提交时获取数据
	console.log(that.$refs.wzImgListUpload.defaultListData) //上传图片
	console.log(that.$refs.wzImgListUpload.nameList)        //新增图片的备注
	*
	* 5.提交数据
	that.$refs.wzImgListUpload.defaultListData.forEach(function (k, i) {
		let type = k.name.substr((k.name.lastIndexOf(".") + 1));
		formData.append('imgList', k, (that.$refs.wzImgListUpload.nameList[i].length > 0 ? that.$refs.wzImgListUpload.nameList[i] : '图片描述') + '.' + type);
	})
	*
	* */

// 图片资源集合  删除图片集合   修改备注集合
export default {
  props: ["imgList"],//接收来自父组件的数据
  data() {
    return {
      //缩略图
      visible: false,
      imgSrc: "",

      //新增图片数据
      defaultList: [],//图片展示数据
      defaultListData: [],//图片表单数据
      nameList: [],//图片名称

      //回想上传的图片
      imgEntityList: [],//多图回显数据
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    this.imgEntityList = JSON.parse(JSON.stringify(this.imgList))
  },
  methods: {//执行的方法
    //上传
    handleBeforeUpload(file) {//新增的时候 处理图片数据
      //如果是文件  就展示文件名
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        this.defaultList.push(window.URL.createObjectURL(file));
        this.defaultListData.push(file);
        this.nameList.push("图片描述");
      } else {
        this.$Message.error('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    //缩略图查看
    handleView(src) {
      this.imgSrc = src;
      this.visible = true;
    },
    //新增图片删除
    handleRemove(file, index) {//新添加的图片删除
      this.defaultList.splice(index, 1);
      this.defaultListData.splice(index, 1);
      this.nameList.splice(index, 1);
    },
  },
  watch: {//监听
    imgList(news,old){
      this.imgEntityList = JSON.parse(JSON.stringify(news))
    }
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
  ._wz_imgListUpload{
    background: #fff!important;
  }
</style>
